<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
             <input type="checkbox" @click="show=!show">是否会员
              <select v-model="vip" v-show="show">
                <option value="钻石" selected>钻石会员</option>
                <option value="铂金">铂金会员</option>
                <option value="黄金">黄金会员</option>
             </select><br>
             <div v-show="show">{{vip}}欢迎你<br>
             数量：<input type="text" v-model="count"><br>
             单价：<input type="text" v-model="price" @blur="show2 = true">
             <div v-if="show2">
                尊敬的{{vip}},你购买的数量是{{count}},单价是{{price}},折扣是{{zhekou()}},总价是{{zj()}}
            </div>
            </div>
    </div>
</body>
</html>
<script>
    const conApp = Vue.createApp({
    data() {
        return {
         vip:'',
         show:false,
         many:'',
         price:'',
         show2: false
    }
},
methods: {
    zhekou(){
        if(this.vip == '钻石')
        {
            return 0.5;
        }
         if(this.vip == '铂金'){
            return 0.6;
        }
        if(this.vip=='黄金'){
            return 0.7;
        }
       
},
zj(){
    return this.zhekou()*this.count*this.price
}
    },}
).mount("#app")
</script>